<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            overflow: hidden;
            background-color: red;
            position: relative;
        }
        main{
            height: 100px;
            background-image: linear-gradient(pink,aqua);
        }
    </style>
</head>
<body>
    <div>
        <!-- p{内容$是序号}*100 -->


       
    </div>
    <main></main>
    
    <script>
        window.onresize = function(){
            console.log("浏览器窗口大小更改了");
        }

         var div = document.querySelector("div");
        window.onkeydown = function(e){
            // console.log("键盘按下事件",e);
            // e.key 是按下的键值
            // e.keyCode  是按下的键的键码值
            console.log(e.key);
            console.log(e.keyCode);
            var a = div.getBoundingClientRect();
            console.log(a);
            if(e.keyCode == 68){
                div.style.left = a.left + 2 + "px";
            }
            if(e.keyCode == 65){
                div.style.left = a.left - 20 + "px";
            }
        }
        // window.onkeyup = function(){
        //     console.log("键盘抬起事件");
        // }
        // window.onkeypress = function(){
        //     console.log("键盘点击事件");
        // }
        
        // 内容卷起事件
        window.onscroll = function(){
            console.log("页面滚动事件");
            // 获取文档呗卷走内容的高度
            console.log(document.documentElement.scrollTop);
        }

        // 
        window.onwheel = function(){
            console.log("滚轮事件");
        }


       
        div.onscroll = function(){
            // console.log("===");
            console.log(div.scrollTop);
        }
        div.onclick = function(){
            console.log("点击");
            // 设置页面被卷起内容的高度
            document.documentElement.scrollTop = 200;
        }
        // div.ondblclick = function(){
        //     console.log("双击");
        // }
        // div.oncontextmenu = function(){
        //     console.log("右键");
        // }

        // 给目标元素,以及所有后代元素都添加了一对事件
        // div.onmouseover = function(){
        //     console.log("移入");
        // }
        // div.onmouseout = function(){
        //     console.log("移出");
        // }
        // 只是给目标元素添加了
        // div.onmouseenter = function(){
        //     console.log("移入---");
        // }
        // div.onmouseleave = function(){
        //     console.log("移出---");
        // }

        // 鼠标移动事件
        // div.onmousemove = function(){
        //     console.log("===");
        // }

        // div.onmousedown = function(){
        //     console.log("按下");
        // }
        // div.onmouseup = function(){
        //     console.log("抬起");
        // }
    </script>
    <!-- 
        onclick 点击事件
        ondblclick 双击事件
        oncontextmenu 右键点击事件
        onmousedown 按下事件
        onmouseup抬起事件
     -->
</body>
</html>